<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta name="viewport" content="target-densitydpi=high-dpi, user-scalable=no" />
    <title>Cordova Sample</title>
    <script type="text/javascript" src="./js/cordova.bada.js"></script>
    <style type="text/css">
    button.btn {
                color:#050;
                font: bold 24px 'trebuchet ms',helvetica,sans-serif;
                background-color:#fed;
                width: 400px;
                height: 100px;
                border: 1px solid;
                border-color: #696 #363 #363 #696;
                /* filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa'); */ 
              } 
              
              button.btn2 {
                color:#050;
                font: bold 24px 'trebuchet ms',helvetica,sans-serif;
                background-color:#fed;
                width: 200px;
                height: 100px;
                border: 1px solid;
                border-color: #696 #363 #363 #696;
                /* filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa'); */ 
              } 
    </style>
    <link href="osp://webapp/css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="osp://webapp/js/webapp_core.js"> </script>
    <script type="text/javascript" src="osp://webapp/js/webapp_ui.js"> </script>
    <script>
        document.addEventListener("deviceready", function(e) {alert('Cordova is ready');});
    </script>
</head>
<body>
    <ul>
        <li>
            <h3>Device</h3>
            <div><button type="button" class="btn" onclick="setDeviceInfo()">DeviceInfo</button></div>
            <span id="device"></span>
        </li>
        <li>
            <h3>Acceleration</h3>
            <div>
                <button type="button" class="btn" onclick="getCurrentAcceleration();">getCurrentAcceleration</button>
            </div>
            <div>
                <button type="button" class="btn" id="accelBtn" onclick="toggleAcceleration();">watchAcceleration</button>
            </div>
            <div>
                <span id="acceleration"></span>
            </div>
        </li>
        <li>
            <h3>Geolocation</h3>
            <div>
                <button type="button" class="btn" onclick="getCurrentPosition();">getCurrentPosition</button>
            </div>
            <div>
                <button type="button" class="btn" id="geoBtn" onclick="togglePosition();">watchPosition</button>
            </div>
            <div>
                <span id="geolocation"></span>
            </div>
        </li>
        <li>
            <h3>Compass</h3>
            <div>
                <button type="button" class="btn" onclick="getCurrentHeading();">getCurrentHeading</button>
            </div>
            <div>
                <button type="button" class="btn" id="compassBtn" onclick="toggleCompass();">watchHeading</button>
            </div>
            <div>
                <span id="heading"></span>
            </div>
        </li>
        <li>
            <h3>Connection</h3>
            <div>
                <button type="button" class="btn" onclick="getConnection();">getConnectionType</button>
            </div>
            <div>
                <span id="connection"></span>
            </div>
        </li>
        <li>
            <h3>Notifications</h3>
            <div>
                <button type="button" class="btn" onclick="notificationAlert();">Alert</button>
            </div>
            <div>
                <button type="button" class="btn" onclick="notificationAlert();">Confirm</button>
            </div>
            <div>
                <button type="button" class="btn" onclick="notificationVibrate();">Vibrate</button>
            </div>
            <div>
                <button type="button" class="btn" onclick="notificationBeep();">Beep</button>
            </div>
            <div>
                <button type="button" class="btn" onclick="notificationLightOn();">Light ON</button>
            </div>
        </li>
        <li>
            <h3>Camera</h3>
            <div>
                <button type="button" class="btn" onclick="cameraPreview();">cameraPreview</button>
            </div>
            <div id="cameraControls" style="display:none;">
                <span>
                    <button type="button" class="btn2" onclick="startVideoCapture();">startVideoCapture</button>
                    <button type="button" class="btn2" onclick="stopVideoCapture();">stopVideoCapture</button>
                </span>
                <div>
                    <button type="button" class="btn" onclick="captureImage();">captureImage</button>
                </div>
            </div>
            <div id="preview"></div>
        </li>
    </ul>
    <script type="text/javascript" src="./js/sample.js"></script>
</body>
</html>
